<template>
  <div class="infoDoc">
    <div class="id-top">
      <p>VIP顾客资料建档</p>
      <i class="el-icon-close" @click="closeInfoDoc"></i>
    </div>

    <div class="id-info">
      <div class="id-info-1">
        <p>客户编号</p>
        <el-input v-model="customerNo" style="width:110px;margin-right:10px;" disabled></el-input>
        <el-checkbox v-model="status">停用</el-checkbox>
        <p>客户简称</p>
        <el-input v-model="name" disabled></el-input>
        <p>VIP联系人</p>
        <el-input v-model="contact"></el-input>
        <p>VIP电话</p>
        <el-input v-model="phone"></el-input>
      </div>
      <p>VIP地址</p>
      <el-input v-model="address" @keyup.enter.native="preservation"></el-input>

      <el-table
        :data="vipData"
        style="width: 100%"
        height="250px"
        highlight-current-row
        :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
        :cell-style="{padding:0,height:'36px'}"
        @row-click="rowClick">
        <el-table-column
          prop="customerNo"
          label="客户编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户简称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="contact"
          label="VIP联系人">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="VIP电话">
        </el-table-column>
        <el-table-column
          prop="address"
          label="VIP地址">
        </el-table-column>
      </el-table>
    </div>

    

    <div class="operation">
      <el-button @click="closeInfoDoc">取消</el-button>
      <el-button @click="deleteInfoDoc">删除</el-button>
      <el-button @click="preservation" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
import {getClient3, postClient2, deleteVip, putVip} from '../../../../network/client'
export default {
  props: {
    name: '',
    customerNo: ''
  },
  data(){
    return {
      status: false,
      id: '',
      contact: '',
      phone: '',
      address: '',
      vipData: []
    }
  },
  methods: {
    closeInfoDoc(){
      this.$emit('closeInfoDoc')
      this.contact = ''
      this.phone = ''
      this.address = ''
    },
    //获取vip资料
    _getClient3(params){
      this.vipData = []
      getClient3(params).then(res=>{
        console.log(res.data)
        res.data.data.forEach(e => {
          e.name = this.name
          this.vipData.push(e)
        })
      })
    },
    deleteInfoDoc(){
      deleteVip({id:this.id}).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.id = ''
          this.contact = ''
          this.phone = ''
          this.address = ''
          this._getClient3({customerNo: this.customerNo})
        }
      })
    },
    preservation(e){
      e.target.blur()
      if (this.contact == '' || this.phone == '' || this.address == '') {
        this.$alert('VIP联系人，电话，地址 不能为空', '提示', {
          confirmButtonText: '确定',
        });
        return
      }
      var obj = {
        customerNo:this.customerNo,
        status:this.status ? 1 : 0,
        contact:this.contact,
        phone:this.phone,
        address:this.address,
        name:this.name
      }
      // if(this.customerNo || this.phone || this.contact==" "){
      //   alert('编号，联系人，或电话号码不能为空')
      // }else{return}

      if (this.address == '' || this.contact == '' || this.phone == '') {
        this.$alert('VIP联系人，电话号码，地址不能为空', '', {
          confirmButtonText: '确定',
        })
        return
      }
      for (const i of this.vipData) {
        if (i.contact == this.contact) {
          this.$confirm('此操作将修改此VIP联系人的资料, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            obj.id = i.id
            putVip(obj).then(res => {
              console.log(res)
              if (res.data.code == 200) {
                this._getClient3({customerNo: this.customerNo})
                this.id = ''
                this.contact = ''
                this.phone = ''
                this.address = ''
              }
            })
          })
          return
        }
      }
      postClient2(obj).then(res=>{
        console.log(res)
        if (res.data.code == 200) {
          this._getClient3({customerNo: this.customerNo})
          this.contact = ''
          this.phone = ''
          this.address = ''
        }
      })
    },
    rowClick(e){
      console.log(e)
      this.id = e.id
      this.address = e.address
      this.contact = e.contact
      this.phone = e.phone
    }
  },
  watch: {
    customerNo(a,b){
      if (a != '') {
        let int = setInterval(() => {
          if (this.customerNo != '') {
            clearInterval(int)
            // this._getClient3({customerNo: this.customerNo})
          }
        }, 100)
      }
    }
  }
}
</script>

<style scoped>
  .infoDoc {
    position: fixed;
    top: 18%;
    left: 50%;
    width: 1052px;
    height: 485px;
    transform: translateX(-50%);
    background-color: #fff;
    box-sizing: border-box;
    z-index: 99;
    /* overflow-y: scroll; */
  }
  .id-top {
    background-color: #f2f2f2;
    height: 50px;
    margin-bottom: 15px;
  }
  .id-top p {
    float: left;
    margin: 15px 0 0 20px;
    font-weight: bolder;
  }
  .id-top i {
    width: 50px;
    float: right;
    text-align: center;
    line-height: 50px;
  }

  .id-info{
    padding: 0 20px;
    margin-bottom: 10px;
  }
  .id-info p{
    display: inline-block;
    margin-right: 5px;
    text-align: right;
    width: 85px;
  }
  .id-info input{
    color: #60627F;
    height: 30px;
    border: solid 1px #DCDFE6;
    border-radius: 5px;
    width: 100px;
    margin-right: 20px;
    padding-left: 15px;
  }
  .id-info input:focus{
    outline: none;
    border: solid 1px #409EFF;
  }
  .id-info .id-info-1{
    margin-bottom: 10px;
  }
  .infoDoc .operation{
    float: right;
    margin-right: 20px;
  }
</style>

<style>
  .id-info .id-info-1 .el-input{
    width: 160px;
  }
  .id-info .el-input__inner{
    height: 30px;
  }
  .id-info>.el-input{
    width: 422px;
    margin-bottom: 25px;
  }
</style>